<template>
  <div class="img-upload-content">
    <el-upload
      ref="upload"
      class="upload-demo"
      :multiple="false"
      accept=".jpg, .jpeg, .png, .gif, .bmp"
      :headers="upload.headers"
      :action="upload.url"
      :data="upload.data"
      :on-change="handleChange"
      :http-request="handleUpload"
      :on-remove="handleRemove"
      :file-list="fileList"
      :before-upload="beforeUpload"
      list-type="picture"
      :disabled="disabled || upload.isUploading"
    >
      <div class="el-upload-handle">
        <el-button size="small" type="primary" :disabled="disabled || upload.isUploading">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">上传小于2M的jpg/jpeg/png/gif/bmp</div>
      </div>
    </el-upload>
    <el-image-viewer v-if="showImgViewer" :on-close="closeImgViewer" :url-list="imgPreviewList"></el-image-viewer>
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { uploadImg } from "@/api/fileList/imgUpload";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import store from "@/store/index";
export default {
  name: "MisImgUpload",
  components:{ElImageViewer},
  props: {
    //是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    setCtId: {
      type: String,
      default: ""
    },
    setCtFunNo: {
      type: String,
      default: ""
    },
    setCtUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // 显示图片查看器
      showImgViewer: false,
      // 查看大图列表
      imgPreviewList: [],
      store: store,
      fileList: [],
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "选择附件",
        // 是否禁用上传
        isUploading: false,

        // 设置上传的请求头部
        headers: {
          Authorization: "" + getToken()
          // "Content-Type": "multipart/form-data"
        },
        //设置请求参数
        data: {
          // multipartFiles: '',
          funno: "",
          dtDate: new Date()
        },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API + "/spspublic/fileblob/uploadFileImage"
      }
    };
  },
  computed: {},
  watch: {
    setCtUrl(val, oldval) {
      if (val && val.length > 0) {
        console.log("setCtUrl");
        console.log(this.$refs.upload);
        let file = { name: "", url: process.env.VUE_APP_BASE_API + val };

        // if (this.fileList[0] && this.fileList[0].url == file.url) {
        //   return;
        // }
        this.fileList.pop();
        this.fileList.push(file);
        this.$nextTick(() => {
        let upload_list_li = document.getElementsByClassName(
          "el-upload-list"
        )[0].children;
         document.getElementsByClassName(
          "el-upload-list"
        )[0].onclick=()=>{
            this.openImgViewer(this.fileList)
          }
        for (let i = 0; i < upload_list_li.length; i++) {
          let li_a = upload_list_li[i];
          let imgElement = document.createElement("div");
          imgElement.setAttribute("style", "padding-top:20px;padding-left:20px;cursor: pointer;");
          imgElement.innerHTML="点击预览"
          imgElement.onclick=()=>{
            this.openImgViewer(this.fileList)
          }

            li_a.appendChild(imgElement);

        }
      });
      } else {
        this.fileList.pop();
      }
    }
  },
  created() {
    console.log("misimgupload-created");
    this.upload.data.funno = this.setCtFunNo;
    // if(this.setCtUrl){
    //   this.fileList[0]={name:'',url:process.env.VUE_APP_BASE_API+`/home/party-mis/uploadPath/upload/${this.setCtFunNo}/${this.setCtUrl}`}
    //   console.log('fileList')
    //   console.log(this.fileList)
    // }
  },

  mounted() {},
  methods: {
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]; // 这一步，是 展示最后一次选择的csv文件
      }

    },
    beforeUpload(file) {
      if (!file.type.includes("image")) {
        this.msgInfo("上传文件类型必须是图片!");
        this.fileList=[];
        return false;
      }
      if (file.size > 1024 * 1024 * 2) {
        this.msgInfo("图片不能超过2M");
        this.fileList=[];
        return false;
      }
      return true;
    },
    handleUpload(param) {
      let file = param.file;
      var formData = new FormData();
      formData.append("file", file);
      formData.append("funno", this.setCtFunNo);
      // batchUpload()
      uploadImg(formData).then(res => {
        console.log(res);
        this.msgSuccess("上传成功");
        this.$emit("updateImgUploadVal", res.data);
      });
    },

    /** 删除按钮操作 */
    handleRemove(file) {
      this.$emit("updateImgUploadVal", "");

    },
    openImgViewer(file) {
      // 获取要查看的图片临时地址
      this.imgPreviewList = [file[0].url]; // 显示图片查看器
      this.showImgViewer = true;
    },
    // 关闭图片查看器
    closeImgViewer() {
      this.showImgViewer = false;
    },
    handleProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    handleSuccess(response, file, fileList) {
      this.upload.isUploading = false;
      this.$message.success("上传成功");
      this.$emit("updateImgUploadVal", file.data);
    },

  }
};
</script>

<style lang='scss' scoped>
.img-upload-content{
  width:100%;
  height:96px;
  -webkit-appearance: none;
  background-color: #FFFFFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
}
.img-upload-content:hover{

}
.main-form .vue-treeselect__control {
  width: 100%;
}

::v-deep .el-upload-list {
  float: right;
  width: calc(100% - 200px);
  max-height: 75px;
  overflow: hidden;
}
//  .img-upload-content .el-upload-list--picture
 ::v-deep .el-upload-list__item {
  margin-top: 0 ;
  transition: none ;
  height:75px ;
  border:0px solid #c0ccda ;
}
::v-deep .el-upload-handle {
  text-align: left;
  float: left;
  padding-top: 8px;
  padding-left:8px;
  width: 200px;
}
</style>

